<template>
  <view class="security-page">

    <!-- 安防功能入口 -->
    <view class="security-functions">
      <!-- 访客管理 -->
      <service-card
        title="访客管理"
        description="访客登记、审核、管理"
        icon-name="user"
        theme-color="#3742fa"
        :badge="visitorBadge"
        badge-icon="info-circle"
        badge-color="#ff4757"
        @click="goToVisitorManagement"
      />

      <!-- 门禁控制 -->
      <service-card
        title="门禁控制"
        description="远程开门、权限管理"
        icon-name="lock"
        theme-color="#2ed573"
        @click="goToAccessControl"
      />

      <!-- 监控查看 -->
      <service-card
        title="监控查看"
        description="实时监控、录像回放"
        icon-name="camera"
        theme-color="#ff9500"
        @click="goToMonitorView"
      />

      <!-- 报警设置 -->
      <service-card
        title="报警设置"
        description="报警规则、通知设置"
        icon-name="bell"
        theme-color="#ff4757"
        :badge="alarmBadge"
        badge-icon="exclamation-circle"
        badge-color="#ff6b6b"
        @click="goToAlarmSetting"
      />

      <!-- 门禁记录 -->
      <service-card
        title="门禁记录"
        description="查看门禁进出记录"
        icon-name="list"
        theme-color="#9b59b6"
        @click="goToAccessRecords"
      />

      <!-- 安防设置 -->
      <service-card
        title="安防设置"
        description="系统配置、权限管理"
        icon-name="setting"
        theme-color="#95a5a6"
        @click="goToSecuritySettings"
      />
    </view>
  </view>
</template>

<script setup>
/**
 * 安防管理页面 - 重构版本
 * @author Wu.Liang
 * @date 2025-01-21
 * @version 2.0 - 按照ServiceCard组件规范重构
 */

import { ref, reactive, computed, onMounted } from 'vue'
import ServiceCard from '@/components/ServiceCard.vue'
import { getIconThemeColor } from '@/utils/themeColors'
import { hasMenuPermission } from '@/utils/permission'

// 安防状态
const securityStatus = reactive({
  doorLock: true,
  camera: true,
  alarm: false
})

// 访客列表
const visitors = ref([
  {
    id: 1,
    name: '张三',
    phone: '138****1234',
    visitTime: '2025-01-21 14:30',
    purpose: '探亲访友',
    statusText: '已进入',
    statusType: 'success'
  },
  {
    id: 2,
    name: '李四',
    phone: '139****5678',
    visitTime: '2025-01-21 16:00',
    purpose: '快递配送',
    statusText: '等待中',
    statusType: 'warning'
  }
])

// 门禁记录
const accessRecords = ref([
  {
    id: 1,
    location: '小区大门',
    type: 'enter',
    typeText: '进入',
    typeColor: 'success',
    time: '2025-01-21 14:30',
    userName: '张三',
    method: '访客码'
  },
  {
    id: 2,
    location: '1栋单元门',
    type: 'enter',
    typeText: '进入',
    typeColor: 'success',
    time: '2025-01-21 14:35',
    userName: '张三',
    method: '访客码'
  },
  {
    id: 3,
    location: '小区大门',
    type: 'exit',
    typeText: '离开',
    typeColor: 'info',
    time: '2025-01-21 18:00',
    userName: '王五',
    method: '业主卡'
  }
])

// 报警记录
const alarmRecords = ref([
  {
    id: 1,
    title: '门禁异常开启',
    time: '2025-01-21 15:30',
    location: '2栋单元门',
    status: 'pending'
  },
  {
    id: 2,
    title: '监控设备离线',
    time: '2025-01-21 16:15',
    location: '小区东门',
    status: 'pending'
  }
])

// 计算属性
const recentVisitors = computed(() => {
  return visitors.value.slice(0, 3) // 只显示最近3个访客
})

const recentAccessRecords = computed(() => {
  return accessRecords.value.slice(0, 3) // 只显示最近3条记录
})

const visitorBadge = computed(() => {
  const pendingCount = visitors.value.filter(v => v.statusType === 'warning').length
  return pendingCount > 0 ? pendingCount.toString() : ''
})

const alarmBadge = computed(() => {
  return alarmRecords.value.length > 0 ? alarmRecords.value.length.toString() : ''
})

// 页面跳转方法
const goToVisitorManagement = () => {
  uni.navigateTo({ url: '/pages/security/visitor' })
}

const goToAccessControl = () => {
  uni.navigateTo({ url: '/pages/security/access-control' })
}

const goToMonitorView = () => {
  uni.navigateTo({ url: '/pages/security/monitor' })
}

const goToAlarmSetting = () => {
  uni.navigateTo({ url: '/pages/security/alarm-setting' })
}

const goToAccessRecords = () => {
  uni.navigateTo({ url: '/pages/security/access-records' })
}

const goToSecuritySettings = () => {
  uni.navigateTo({ url: '/pages/security/settings' })
}

// 页面加载
onMounted(() => {
  // 加载安防状态数据
  loadSecurityStatus()
  // 加载访客数据
  loadVisitors()
  // 加载门禁记录
  loadAccessRecords()
  // 加载报警记录
  loadAlarmRecords()
})

// 数据加载方法
const loadSecurityStatus = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载安防状态')
  } catch (error) {
    console.error('加载安防状态失败:', error)
  }
}

const loadVisitors = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载访客数据')
  } catch (error) {
    console.error('加载访客数据失败:', error)
  }
}

const loadAccessRecords = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载门禁记录')
  } catch (error) {
    console.error('加载门禁记录失败:', error)
  }
}

const loadAlarmRecords = async () => {
  try {
    // 这里应该调用实际的API
    console.log('加载报警记录')
  } catch (error) {
    console.error('加载报警记录失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.security-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
  
  // 小屏幕适配
  @media screen and (max-width: 375px) {
    padding: 12px;
  }
  
  // 中等屏幕适配
  @media screen and (min-width: 376px) and (max-width: 768px) {
    padding: 16px;
  }
  
  // 大屏幕适配
  @media screen and (min-width: 769px) {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
}

.security-functions {
  margin-bottom: 20px;
}
</style> 